safariHeightFix() {
  // See: http://stackoverflow.com/questions/33636796
  // in safari, `height: 100%` doesn't work in flexbox
  // but `position: absolute` normalize it, dono why...
  position: absolute;
}

.primary-panel-axis {
  flex-grow: 1;
  z-index: z(main-pane-view);
}

.primary-panel-blur {
  filter: blur(5px)
}

.panel-axis, .pane-axis {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: stretch;
  safariHeightFix();
}

.panel, .pane {
  height: 100%;
  width: 100%;
}

.panel-container,
.pane-container {
  // not every .pane(l) need safariHeightFix, only children of .resizable do
  &.resizable {
    min-width: 30px;
    min-height: 30px;
    > .panel, > .pane {
      safariHeightFix();
    }
  }
}

.panel-container, .pane-container {
  flex-basis: 0;
  flex-grow: 1;
  overflow: auto;
  position: relative;
  border-width: 1px;
  border-style: solid;
  &:last-child {
    border: 0;
    > .resize-bar {
      display: none;
    }
  }
  &.row {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    margin: 0;
  }
  &.column {
    border-top: 0;
    border-right: 0;
    border-left: 0;
  }
}

.resize-bar {
  z-index: z(pane-resize-bar);
  &.col-resize {
    cursor: col-resize;
    border-right: 2px solid $base-border-color;
    absolute(right 0 top 0 bottom 0);
    height: 100%;
    width: 4px;
  }
  &.row-resize {
    cursor: row-resize;
    absolute(bottom 0 left 0 right 0);
    width: 100%;
    height: 4px;
  }
}
